import Component from "../Component.js";

export default class Tree extends Component{
    constructor() {
        super();
    }

    initTreeStatus() {
        const metas = this.utils.getLocalStorage('metas');
        const meta_ids = this.utils.getLocalStorage('meta_ids');
        for (const m1 of metas) {
            const array = m1.split('_');
            for (const m2 of meta_ids) {
                if (array[3] === m2) {
                    this.$$(`#tree_${array[1]}`).prop("checked", true);
                    this.$$(`#tree_${array[1]}_${array[2]}`).prop("checked", true);
                    this.$$(`#tree_${array[1]}_${array[2]}_${array[3]}`).prop("checked", true);
                }
            }
        }

        if (meta_ids.length > 0) {
            this.$$("#get-tree-maps").show();
        } else {
            this.$$("#get-tree-maps").hide();
        }
    }

    checkTreeStatus() {
        const ids = []
        const metas = this.utils.getLocalStorage('metas');
        const meta_ids = this.utils.getLocalStorage('meta_ids');

        for (const m1 of metas) {
            const array = m1.split('_');
            if (!ids.includes(`#tree_${array[1]}`)) {
                this.$$(`#tree_${array[1]}`).prop("checked", false);
            }
            if (!ids.includes(`#tree_${array[1]}_${array[2]}`)) {
                this.$$(`#tree_${array[1]}_${array[2]}`).prop("checked", false);
            }
            for (const m2 of meta_ids) {
                if (array[3] === m2) {
                    this.$$(`#tree_${array[1]}`).prop("checked", true);
                    ids.push(`#tree_${array[1]}`);
                    this.$$(`#tree_${array[1]}_${array[2]}`).prop("checked", true);
                    ids.push(`#tree_${array[1]}_${array[2]}`);
                }
            }
        }

        if (meta_ids.length > 0) {
            this.$$("#get-tree-maps").show();
        } else {
            this.$$("#get-tree-maps").hide();
        }
    }

    template() {
        this.$$("#get-tree-maps").hide();
    }

    control() {
        this.$$("#maptree").on("click", async () => {
            this.toast('选择完图件图件后,点击"获取地图"按钮来获取地图。');

            const mine = this.utils.getLocalStorage('mine');
            if (mine === null) {
                this.toast("没有煤矿信息,请先选择煤矿。");
                this.popup.close();
                return;
            }

            this.$$("#pannel").show();
            this.$$("#pannel span").text('选择图件');
            this.$$("#pannel-all-show").hide();
            this.$$("#pannel .page-content").empty();
            const div = `
                <div class="block block-strong no-padding-horizontal">
                    <div class="treeview"></div>
                </div>
            `;
            this.$$("#pannel .page-content").append(div);

            const data = await this.api.getMetasTree(mine.code);
            const tree = data.data, metas=[];
            let index0 = 0, index1 = 0;
            let meta_ids = this.utils.getLocalStorage('meta_ids');
            if (meta_ids === null) {
                meta_ids = []
                this.utils.setLocalStorage('meta_ids', meta_ids);
            }

            for (const t0 in tree) {
                index0 = index0 + 1
                const t0Id = `t0${this.utils.uuid()}`, t0Div = `
                    <div class="treeview-item treeview-item-opened" id="${t0Id}">
                        <div class="treeview-item-root">
                            <div class="treeview-toggle"></div>
                            <div class="treeview-item-content">
                                <input type="checkbox" id="tree_${index0}"/>
                                <i class="icon f7-icons" style="color: var(--primary-color); font-size: 14px;">folder_fill</i>
                                <div class="treeview-item-label">${t0}</div>
                            </div>
                        </div>
                        <div class="treeview-item-children"></div>
                    </div>
                `;
                this.$$(`.treeview`).append(t0Div);
                this.$$(`#tree_${index0}`).on("click", async (e) => {
                    const index = e.target.id.split('_')[1];
                    if( this.$$(e.target).is(':checked') ) {
                        for (let m of metas) {
                            const arr = m.split('_');
                            if (arr[1] === index) {
                                this.$$(`#tree_${arr[1]}_${arr[2]}`).prop("checked", true);
                                this.$$(`#${m}`).prop("checked", true);
                                if (!meta_ids.includes(arr[3])) {
                                    meta_ids.push(arr[3]);
                                }
                            }
                        }
                        this.utils.setLocalStorage('meta_ids', meta_ids);
                        this.checkTreeStatus();
                    } else {
                        for (let m of metas) {
                            const arr = m.split('_');
                            if (arr[1] === index) {
                                this.$$(`#tree_${arr[1]}_${arr[2]}`).prop("checked", false);
                                this.$$(`#${m}`).prop("checked", false);
                                const l = meta_ids.indexOf(arr[3]);
                                meta_ids.splice(l, 1);
                            }
                        }
                        this.utils.setLocalStorage('meta_ids', meta_ids);
                        this.checkTreeStatus();
                    }
                })

                for (const t1 in tree[t0]) {
                    index1 = index1 + 1;
                    const t1Id = `t1${this.utils.uuid()}`, t1Div = `
                        <div class="treeview-item treeview-item-opened" id="${t1Id}">
                            <div class="treeview-item-root">
                                <div class="treeview-toggle"></div>
                                <div class="treeview-item-content">
                                    <input type="checkbox" id="tree_${index0}_${index1}"/>
                                    <i class="icon f7-icons" style="color: var(--primary-color); font-size: 14px;">folder_fill</i>
                                    <div class="treeview-item-label">${t1}</div>
                                </div>
                            </div>
                            <div class="treeview-item-children"></div>
                        </div>
                    `;
                    this.$$(`#${t0Id}>.treeview-item-children`).append(t1Div);
                    this.$$(`#tree_${index0}_${index1}`).on("click", async (e) => {
                        const index = e.target.id.split('_')[2];
                        if( this.$$(e.target).is(':checked') ){
                            for (let m of metas) {
                                const arr = m.split('_');
                                if (arr[2] === index) {
                                    this.$$(`#tree_${arr[1]}`).prop("checked", true);
                                    this.$$(`#${m}`).prop("checked", true);
                                    if (!meta_ids.includes(arr[3])) {
                                        meta_ids.push(arr[3]);
                                    }
                                }
                            }
                            this.utils.setLocalStorage('meta_ids', meta_ids);
                            this.checkTreeStatus();
                        } else {
                            for (let m of metas) {
                                const arr = m.split('_')
                                if (arr[2] === index) {
                                    this.$$(`#tree_${arr[1]}_${arr[2]}`).prop("checked", false);
                                    this.$$(`#${m}`).prop("checked", false);
                                    const l = meta_ids.indexOf(arr[3]);
                                    meta_ids.splice(l, 1);
                                }
                            }
                            this.utils.setLocalStorage('meta_ids', meta_ids);
                            this.checkTreeStatus();
                        }
                    })

                    for (const t2 of tree[t0][t1]) {
                        const id = `tree_${index0}_${index1}_${t2.meta_id}`
                        metas.push(id);

                        const t2Id = `t1${this.utils.uuid()}`, t2Div = `
                            <div class="treeview-item treeview-item-opened" id="${t2Id}">
                                <div class="treeview-item-root">
                                    <div class="treeview-item-content">
                                        <input type="checkbox" id="${id}"/>
                                        <i class="icon f7-icons" style="color: var(--primary-color); font-size: 14px;">doc_fill</i>
                                        <div class="treeview-item-label">${t2.name}</div>
                                    </div>
                                </div>
                            </div>
                        `;

                        this.$$(`#${t1Id}>.treeview-item-children`).append(t2Div);
                        this.$$(`#tree_${index0}_${index1}_${t2.meta_id}`).on("click", async (e) => {
                            const arr = e.target.id.split('_');
                            if( this.$$(e.target).is(':checked') ){
                                this.$$(`#tree_${arr[1]}`).prop("checked", true);
                                this.$$(`#tree_${arr[1]}_${arr[2]}`).prop("checked", true);
                                if (!meta_ids.includes(arr[3])) {
                                    meta_ids.push(arr[3]);
                                }
                                this.utils.setLocalStorage('meta_ids', meta_ids);
                                this.checkTreeStatus();
                            } else {
                                const l = meta_ids.indexOf(arr[3]);
                                meta_ids.splice(l, 1);
                                this.utils.setLocalStorage('meta_ids', meta_ids);
                                this.checkTreeStatus();
                            }
                        })
                    }

                    this.utils.setLocalStorage('metas', metas);
                }
            }

            this.initTreeStatus()

            this.$$("#pannel-close").on("click", () => {
                this.$$("#pannel").hide();
                this.$$("#get-tree-maps").hide();
            })

            this.$$("#get-tree-maps").on("click", async () => {
                this.delay('submit', async () => {
                    try {
                        this.app.dialog.preloader("正在获取矿图...");
                        const res = await this.api.getVectors(meta_ids)
                        if (res.code !== 0) {
                            this.toast(res.message);
                            this.app.dialog.close();
                            return;
                        }

                        // 初始化config信息
                        const data = res.data;
                        this.drawer.init(data.meta, data.layers);

                        // 将从网络上取下来的数据存入数据库
                        this.db.init(data).then(() => {
                            // 从本地提取数据
                            this.drawer.location().then(() => {
                                this.app.dialog.close();
                            })
                        })
                    } catch(err) {
                        this.toast(err);
                        this.app.dialog.close();
                    }
                }, 300);
            })
        })
    }
}